<template>
	<view>
		<view class="header">
			<view class="header-con">
				<view class="header-input-container">
					<input type="text" placeholder="请输入关键字" placeholder-style="color:#999999;font-size:28rpx;text-align:center" @tap="gosearch()" disabled="true" />
					<!-- <image src="../../../images/goods/search.png"></image> -->
				</view>
			</view>
		</view>
		<view style="height: 87rpx;"></view>
		<view class="fenlei-list">
			<view class="fenlei-item" v-for="(item,index) in list" :key="index" :data-id="item.id" @tap="goodslist">
				<view class="fenlei-name">
					<view class="name-chinese">— {{item.name}} —</view>
					<view class="name-english">{{item.english_name}}</view>
				</view>
				
				<image :src="item.filepath" class="tupian"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	
	import httpPath from '@/static/js/path.js';
	export default {
			data() {
				return {
				    list:{},
				}
			},
			onLoad(option) {
	            this.getdata()
			},
			methods: {
				gosearch(){
					uni.navigateTo({
						url:"saerch"
					})
				},
	            swiperchange(e){					
					this.current=e.detail.current+1;
				},/**
				 * 获取详情数据
				 */
				getdata(){
					uni.request({
						url: httpPath.filePath+'/index/category/index',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {},
						success: (res) => {
							if(res.data.code==200){
								this.list=res.data.data;
							}   
						}
					});
				},/**
				 * 前往商品列表页面
				 */
				goodslist(e){
					uni.navigateTo({
						url:"goodslist?id="+e.currentTarget.dataset.id
					})
				}
			},
			
		}
</script>

<style>
	.header{height:85rpx;background: #333;padding-top: 16rpx;position: fixed;top: 0px;width: 100%;left: 0px;z-index: 100000000;}
	.header-input-container{width: 686rpx;margin:auto;height: 57rpx;border-radius: 30rpx;position: relative;background: #fff;}
	.header-input-container input{width: 100%;height: 100%;padding-left: 20rpx;background: #fff;border: none;border-radius: 30rpx;}
	.header-input-container image{width:29rpx ;height:36rpx ;position: absolute;top:10rpx ;right: 20rpx;}
	.fenlei-list{width: 686rpx;margin:30rpx auto;}
	.fenlei-item{position: relative;margin-bottom: 20rpx;height: 335rpx;width: 100%;}
	.fenlei-item image{width: 100%;height: 100%;border-radius: 5px;}
	.fenlei-name{position: absolute;top: 0px;height: 0px;width: 100%;height: 100%;z-index: 100;}
	.fenlei-name view{color: #FFFFFF;}
	/* .fenlei-name view{color: #000000;} */
	.name-chinese{font-family: ziti;font-size: 50rpx;margin-top: 120rpx;text-align: center;}
	.name-english{font-weight: ziti;font-size: 20rpx;letter-spacing: 10rpx;text-align: center;}
</style>
